import React from 'react';
import Component, { componentClass, ComponentProps } from '../../../../common/Component';
import './index.less';
import 'highlight.js/styles/github.css';
const hljs = require('highlight.js');
import katex from '../../../../../lib/katex/katex';

export interface CodeBlockProps extends ComponentProps{
    lang?: string
}

export class CodeBlock extends Component<CodeBlockProps>{

    render (){
        const code = typeof this.props.children === 'string' ? this.props.children : 'please write string ...';
        const language = this.props.lang || 'text';
        const html = hljs.highlight(code, {language: language}).value;
        return <div className="apps-markdown-codeblock highlight">
            <pre  dangerouslySetInnerHTML={{__html: html}} ></pre>
        </div>
    }
}


export class MathBlock extends Component{
    render (){
        const code = typeof this.props.children === 'string' ? this.props.children : '';
        var html = katex.renderToString(code, {
            throwOnError: true,
            displayMode: true
        });
        return <div className='apps-markdown-mathblock' dangerouslySetInnerHTML={{__html: html}} ></div>
    }
}

export interface MathProps{
    latex: string
}

export class M extends Component<MathProps>{
    render (){
        const code = (typeof this.props.latex) === 'string' ? this.props.latex : '';
        var html = katex.renderToString(code, {
            throwOnError: true,
            displayMode: false
        });
        return <span className='apps-markdown-mathinline' dangerouslySetInnerHTML={{__html: html}} ></span>
    }
}
